<!--
    试算页面-合同信息 公共插件

    参数：
    applyNo         申请编号
    方法：
    backInfo        整体表单
 -->
<template>
    <div class="basis-info">
        <Form ref="showContractForm" :model="contractForm" :lable-width="50">
            <Row>
                <Col :xs="24" :md="12" :lg="8" :xl="6">
                    <FormItem label="申请单号" prop="applyNo" :label-width="100">
                            <Input v-model="contractForm.applyNo" style="width:150px" v-bind:disabled="readonly" />
                    </FormItem>
                </Col>
                <Col :xs="24" :md="12" :lg="8" :xl="6">
                    <FormItem label="合同单号" prop="contractNo" :label-width="100">
                        <Input v-model="contractForm.contractNo" style="width:150px" v-bind:disabled="readonly" />
                    </FormItem>
                </Col>
                <Col :xs="24" :md="12" :lg="8" :xl="6">
                    <FormItem label="合同状态" prop="contractStatus" :label-width="100">
                        <Select v-model="contractForm.contractStatus" style="width:150px" v-bind:disabled="readonly" >
                            <Option v-for="item in contractStatusList" :value="item.value" :key="item.value" :label="item.title">
                                {{item.title}}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col :xs="24" :md="12" :lg="8" :xl="6">
                    <FormItem label="合同生效日期" prop="startDate" :label-width="100">
                        <DatePicker type="date" style="width: 150px" format="yyyy-MM-dd" v-model="contractForm.startDate" v-bind:disabled="readonly" />
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col :xs="24" :md="12" :lg="8" :xl="6">
                    <FormItem label="经销商" prop="channelFullName" :label-width="100">
                        <Input style="width: 150px" v-model="contractForm.channelFullName" v-bind:disabled="readonly" />
                    </FormItem>
                </Col>
                <Col :xs="24" :md="24" :lg="16" :xl="12">
                    <FormItem label="产品名称" prop="productName" :label-width="100">
                        <Input style="width: 400px" v-model="contractForm.productName" v-bind:disabled="readonly" />
                    </FormItem>
                </Col>
                <Col :xs="24" :md="12" :lg="8" :xl="6">
                    <FormItem label="合同结束日期" prop="endDate" :label-width="100">
                        <DatePicker type="date" style="width: 150px" format="yyyy-MM-dd" v-model="contractForm.endDate" v-bind:disabled="readonly" />
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col :xs="24" :md="12" :lg="8" :xl="6">
                    <FormItem label="期数" prop="loanTerm" :label-width="100">
                        <Input style="width: 150px" type="number" v-model="contractForm.loanTerm" v-bind:disabled="readonly" />
                    </FormItem>
                </Col>
                <Col :xs="24" :md="12" :lg="8" :xl="6">
                    <FormItem label="已还期数" prop="paidTerm" :label-width="100">
                        <Input style="width: 150px" type="number" v-model="contractForm.alreadyPeriods" v-bind:disabled="readonly" />
                    </FormItem>
                </Col>
                <Col :xs="24" :md="12" :lg="8" :xl="6">
                    <FormItem label="未还期数" prop="outTerm" :label-width="100">
                        <Input style="width: 150px" type="number" v-model="contractForm.noAlreadyPeriods" v-bind:disabled="readonly" />
                    </FormItem>
                </Col>
                <Col :xs="24" :md="12" :lg="8" :xl="6">
                    <FormItem label="合同利率" prop="settleRate" :label-width="100">
                        <Input style="width: 150px" type="number" v-model="contractForm.settleRate" v-bind:disabled="readonly" />
                    </FormItem>
                </Col>
            </Row>
        </Form>
    </div>
</template>

<script>

    import {
        getStaySettleDetailByApplyNo,
    } from "@/projects/basic/api/contract/clearance/stay-settle";

    import {
        getDictDataByType,
        getByTypes
    } from "_p/basic/api/admin/datadic";

    export default {
        name: "startSettle",
        props: {
            applyNo:{
                type:String,
            },
        },
        data() {
            return {
                readonly:true,
                contractForm:{
                    applyNo:null,//申请编号
                    contractNo:'',//合同编号
                    contractStatus:'',//合同状态
                    startDate:'',//开始日期
                    endDate:'',//结束日期
                    channelFullName:'',//经销商名称
                    productName:'',//产品名称
                    loanTerm:'',//期数
                    alreadyPeriods:'',//已还期数
                    noAlreadyPeriods:'',//未还期数
                    settleRate:'',//合同利率
                },
                contractStatusList:[],//获取合同状态
            }
        },
        created(){
            this.refreshCom();
        },
        mounted(){

        },
        methods: {
            //页面跳转进入初始化
            refreshCom(){
                this.initDatadic();//初始化数据字典
                this.changeContractInfo(this.applyNo);
            },
            //改变合同基本信息
            changeContractInfo(applyNo){
                getStaySettleDetailByApplyNo({applyNo:applyNo}).then(res => {
                    if (res.code === "0000") {
                        this.contractForm = res.data;
                        this.$emit('backInfo',this.contractForm);//返回信息
                    }
                });
            },
            //数据字典
            initDatadic() {
                //获取合同状态
                getDictDataByType("contractStatus").then(res => {
                    if (res.code === "0000") {
                        this.contractStatusList = res.data;
                    }
                });
            },

        },
    }
</script>

<style scoped>
    .basis-info>>>.ivu-input[disabled]{
        color: black;
    }
    .basis-info>>>.ivu-select-disabled .ivu-select-selected-value{
        color:#515a6e;
    }
</style>
